<template>
    <div>
        <el-form label-width="120px" :inline="false" size="normal">
            <el-form-item label="SPU 名称">{{ spu.spuName }}</el-form-item>
            <el-form-item label="SKU 名称">
                <el-input placeholder="SKU名称" size="small" v-model="skuForm.skuName"></el-input>
            </el-form-item>
            <el-form-item label="价格(元)">
                <el-input type="number" size="small" v-model="skuForm.price"></el-input>
            </el-form-item>
            <el-form-item label="重量(千克)">
                <el-input type="number" size="small" v-model="skuForm.weight"></el-input>
            </el-form-item>
            <el-form-item label="规格描述">
                <el-input type="textarea" rows="4" size="small" v-model="skuForm.skuDesc"></el-input>
            </el-form-item>
            <el-form-item label="平台属性">
                <!-- 属性选择列表  我们都是遍历里面的item  然后在遍历里面的option -->
                <el-form size="normal" label-width="120px" :inline="true">
                    <el-form-item :label="item.attrName" v-for="item in attrList" :key="item.id" style="margin-top:10px">
                        <el-select v-model="item.attrValueName" filterable>
                            <el-option :label="attrValue.valueName" :value="`${item.id}:${attrValue.id}`"
                                v-for="attrValue in item.attrValueList" :key="attrValue.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="销售属性">
                <!-- 属性选择列表  我们都是遍历里面的item  然后在遍历里面的option -->
                <el-form size="normal" label-width="120px" :inline="true">
                    <el-form-item :label="item.saleAttrName" v-for="item in saleAttrList" :key="item.id">
                        <el-select v-model="item.saleAttrValueName" filterable size="small">
                            <el-option :label="attrValue.saleAttrValueName" :value="`${item.id}:${attrValue.id}`"
                                v-for="attrValue in item.spuSaleAttrValueList" :key="attrValue.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>

            <!-- 图片列表 -->
            <el-form-item label="图片列表">
                <el-table tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" border stripe
                    :data="imgList">
                    <el-table-column type="selection" width="80"></el-table-column>
                    <el-table-column label="图片">
                        <template v-slot="{ row, column, $index }">
                            <el-image :src="row.imgUrl" fit="fill" :lazy="true" style="width:120px"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" prop="imgName"></el-table-column>
                    <el-table-column label="操作">
                        <template v-slot="{ row, column, $index }">
                            <el-button v-show="!row.isDefault" type="primary" size="mini"
                                @click="isDefaultImg(row)">设为默认</el-button>
                            <el-tag v-show="row.isDefault" type="wraning" size="small" icon="el-icon-check">默认</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" @click="addSku">保存</el-button>
                <el-button size="small" @click="toSpu">取消</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
/* 
  "skuAttrValueList": [
    {
      "attrId": 0,
      "attrName": "string",
      "id": 0,
      "skuId": 0,
      "valueId": 0,
      "valueName": "string"
    }
  ],
  "skuImageList": [
    {
      "id": 0,
      "imgName": "string",
      "imgUrl": "string",
      "isDefault": "string",
      "skuId": 0,
      "spuImgId": 0
    }
  ],
  "skuSaleAttrValueList": [
    {
      "id": 0,
      "saleAttrId": 0,
      "saleAttrName": "string",
      "saleAttrValueId": 0,
      "saleAttrValueName": "string",
      "skuId": 0,
      "spuId": 0
    }
  ],
}
*/
import skuApi from '@/api/sku'
import categoryApi from '@/api/category'
import { mapState } from 'vuex'
export default {
    name: 'skuForm',
    props: ['spu', 'isShowSpu'],
    data() {
        return {
            imgList: [],// 图片列表
            saleAttrList: [],// 销售属性列表
            attrList: [],// 平台属性列表
            skuForm: {// 初始化数据
                price: '',
                skuName: '',
                skuDesc: '',
                weight: '',
                spuId: '',
                tmId: '',
                category3Id: '',
                skuDefaultImg: '',
                skuAttrValueList: [],
                skuImageList: [],
                skuSaleAttrValueList: [],
                ...this.spu
            },
            chooseImgList: [],// 用来保存选中的图片列表
        }
    },
    async mounted() {
        await this.getSaleAttrList()
        await this.getImgList()
        await this.getAttrList()
    },
    methods: {
        // 获取销售属性列表
        async getSaleAttrList() {
            const res = await skuApi.getSpuSaleAttrList(this.spu.id)
            // console.log(res);
            if (res.code === 200) {
                this.saleAttrList = res.data
            }
        },
        // 获取图片列表
        async getImgList() {
            const res = await skuApi.getSpuImageList(this.spu.id)
            // console.log(res);
            if (res.code === 200) {
                this.imgList = res.data.map(item => {
                    return {
                        ...item,
                        isDefault: false
                    }
                })
            }
        },
        // 获取平台属性列表
        async getAttrList() {
            let { category1Id, category2Id, category3Id } = this
            // console.log(this.$store);
            const res = await categoryApi.attrInfoList({ category1Id, category2Id, category3Id })
            // console.log(res);
            if (res.code = 200) {
                this.attrList = res.data
            }
        },
        // 当表格选择项发生变化时会触发该事件
        handleSelectionChange(selection) {
            this.chooseImgList = selection
        },
        // 返回SpuList
        toSpu() {
            this.isShowSpu({ val: '1' })
        },
        // 设为默认
        isDefaultImg(row) {
            // 排他   将所有的都变成不默认
            this.imgList.forEach(item => item.isDefault = false);
            // 使用$set响应式改变默认的状态
            this.$set(row, 'isDefault', true)
        },
        // 点击了保存
        async addSku() {
            let skuInfo = { ...this.skuForm }
            skuInfo.spuId = this.spu.id
            // console.log(skuInfo);
            // 处理我们的普通属性
            this.attrList.forEach(item => {
                // 判断是否被选中过
                if (item.attrValueName) {
                    // 使用数组的方法去解构出我们需要的数据
                    let [attrId, valueId] = item.attrValueName.split(':')
                    // 做成一个对象
                    let obj = { attrId, valueId }
                    // push到我们手机数据对象中
                    skuInfo.skuAttrValueList.push(obj)
                }
                // 如果没有attrValueName 那么就说明没有选中。我们什么也不干
            });
            // 处理销售属性
            this.saleAttrList.forEach(item => {
                // 其实销售属性的处理和平台属性一模一样
                if (item.saleAttrValueName) {
                    let [saleAttrId, saleAttrValueId] = item.saleAttrValueName.split(':')
                    let obj = { saleAttrId, saleAttrValueId }
                    skuInfo.skuSaleAttrValueList.push(obj)
                }
            })
            /* 
                  imgName: item.imgName,
                imgUrl: item.imgUrl,
                spuImgId: item.id, //item是某一个sku的图片  是从spu图片中进行选择
                isDefault: item.isDefault,
            */
            // 图片列表
            skuInfo.skuImageList = this.chooseImgList.map(item => {
                // 做好我们的图片列表的数据，因为有一些数据是不需要的
                return {
                    imgName: item.imgName,
                    imgUrl: item.imgUrl,
                    spuImgId: item.id,
                    isDefault: item.isDefault
                }
            })
            // 将默认图片拿到
            let imgs = this.chooseImgList.filter(item => {
                if (item.isDefault) {
                    return item.imgUrl
                }
            })
            skuInfo.skuDefaultImg = imgs[0].imgUrl
            console.log(skuInfo);
            try {
                const res = await skuApi.saveSkuInfo(skuInfo)
                // console.log(res);
                // 成功了发出提示
                this.$message.success('添加Sku成功了')
                // 返回默认页
                this.isShowSpu({ val: '1' })
            } catch (error) {
                this.$message.info('添加Sku失败了')
            }
        },
    },
    computed: {
        ...mapState({
            category1Id: state => state.headercategory.category1Id,
            category2Id: state => state.headercategory.category2Id,
            category3Id: state => state.headercategory.category3Id,
        })
    }
}
</script>

<style scoped></style>
